<template>
  <div class="space-detail-container">
    <!-- 头部导航 -->
    <div class="header-toolbar">
      <div class="left-section">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item @click="$router.push('/knowledge')">知识管理</el-breadcrumb-item>
          <el-breadcrumb-item @click="$router.push('/knowledge/spaces')">空间管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ space.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="right-section">
        <el-button @click="showCreatePageDialog = true">
          <el-icon>
            <Plus />
          </el-icon>
          新建页面
        </el-button>
        <el-dropdown>
          <el-button>
            更多操作 <el-icon>
              <ArrowDown />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="editSpace">编辑空间</el-dropdown-item>
              <el-dropdown-item @click="exportSpace">导出空间</el-dropdown-item>
              <el-dropdown-item divided @click="deleteSpace">删除空间</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 空间信息头部 -->
    <div class="space-header">
      <div class="space-info">
        <div class="space-avatar" :style="{ backgroundColor: space.color || '#409EFF' }">
          {{ space.name ? space.name.charAt(0) : 'S' }}
        </div>
        <div class="space-details">
          <h1 class="space-title">{{ space.name }}</h1>
          <p class="space-description">{{ space.description || '暂无描述' }}</p>
          <div class="space-meta">
            <span class="meta-item">
              <el-icon>
                <User />
              </el-icon>
              创建者：{{ space.createdBy?.username || '未知' }}
            </span>
            <span class="meta-item">
              <el-icon>
                <Calendar />
              </el-icon>
              创建时间：{{ formatDate(space.createdAt) }}
            </span>
            <span class="meta-item">
              <el-icon>
                <View />
              </el-icon>
              可见性：{{ getVisibilityText(space.visibility) }}
            </span>
          </div>
        </div>
      </div>
      <div class="space-stats">
        <div class="stat-item">
          <div class="stat-number">{{ totalPages }}</div>
          <div class="stat-label">页面数量</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ totalViews }}</div>
          <div class="stat-label">总阅读量</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ collaborators.length }}</div>
          <div class="stat-label">协作者</div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧页面树 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <h3>页面结构</h3>
          <div class="sidebar-actions">
            <el-input v-model="pageSearchQuery" placeholder="搜索页面" prefix-icon="Search" size="small" clearable />
          </div>
        </div>
        <div class="page-tree">
          <el-tree ref="pageTreeRef" :data="filteredPageTree" :props="treeProps" node-key="id"
            :expand-on-click-node="false" :default-expand-all="false" :filter-node-method="filterNode"
            @node-click="selectPage">
            <template #default="{ node, data }">
              <div class="tree-node">
                <div class="node-content">
                  <el-icon class="node-icon">
                    <Document v-if="!data.children || data.children.length === 0" />
                    <Folder v-else />
                  </el-icon>
                  <span class="node-label">{{ data.name }}</span>
                </div>
                <div class="node-actions" @click.stop>
                  <el-dropdown trigger="click">
                    <el-icon class="action-icon">
                      <MoreFilled />
                    </el-icon>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="addChildPage(data)">添加子页面</el-dropdown-item>
                        <el-dropdown-item @click="editPage(data)">编辑页面</el-dropdown-item>
                        <el-dropdown-item @click="duplicatePage(data)">复制页面</el-dropdown-item>
                        <el-dropdown-item divided @click="deletePage(data)">删除页面</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </template>
          </el-tree>
        </div>

        <!-- 空状态 -->
        <div v-if="pages.length === 0" class="empty-pages">
          <div class="empty-illustration">
            <el-icon size="60">
              <Document />
            </el-icon>
          </div>
          <h4>暂无页面</h4>
          <p>创建第一个页面开始记录知识</p>
          <el-button type="primary" size="small" @click="showCreatePageDialog = true">
            <el-icon>
              <Plus />
            </el-icon>
            新建页面
          </el-button>
        </div>
      </div>

      <!-- 右侧页面详情 -->
      <div class="content-area">
        <div v-if="selectedPage" class="page-detail">
          <div class="page-header">
            <div class="page-title-section">
              <el-icon class="page-icon">
                <Document />
              </el-icon>
              <h2 class="page-title">{{ selectedPage.name }}</h2>
            </div>
            <div class="page-actions">
              <el-button size="small" @click="editPage(selectedPage)">
                <el-icon>
                  <Edit />
                </el-icon>
                编辑
              </el-button>
              <el-button size="small" @click="sharePage(selectedPage)">
                <el-icon>
                  <Share />
                </el-icon>
                分享
              </el-button>
            </div>
          </div>

          <div class="page-meta">
            <div class="meta-row">
              <span class="meta-label">创建者：</span>
              <span class="meta-value">{{ selectedPage.createdBy?.username || '未知' }}</span>
            </div>
            <div class="meta-row">
              <span class="meta-label">创建时间：</span>
              <span class="meta-value">{{ formatDate(selectedPage.createdAt) }}</span>
            </div>
            <div class="meta-row">
              <span class="meta-label">最后更新：</span>
              <span class="meta-value">{{ formatDate(selectedPage.updatedAt) }}</span>
            </div>
            <div class="meta-row">
              <span class="meta-label">阅读次数：</span>
              <span class="meta-value">{{ selectedPage.viewCount || 0 }}</span>
            </div>
          </div>

          <div class="page-content">
            <div class="content-preview">
              <h4>内容预览</h4>
              <div class="preview-text">
                {{ selectedPage.content || '暂无内容' }}
              </div>
            </div>
          </div>
        </div>

        <!-- 未选择页面时的状态 -->
        <div v-else class="no-selection">
          <div class="no-selection-illustration">
            <el-icon size="80">
              <Document />
            </el-icon>
          </div>
          <h3>选择一个页面查看详情</h3>
          <p>从左侧页面树中选择一个页面来查看其详细信息</p>
        </div>
      </div>
    </div>

    <!-- 创建页面对话框 -->
    <el-dialog v-model="showCreatePageDialog" title="新建页面" width="500px">
      <el-form :model="newPage" :rules="pageRules" ref="pageFormRef" label-width="80px">
        <el-form-item label="页面名称" prop="name">
          <el-input v-model="newPage.name" placeholder="请输入页面名称" />
        </el-form-item>
        <el-form-item label="页面图标">
          <el-select v-model="newPage.icon" placeholder="选择图标" style="width: 100%">
            <el-option label="📄 文档" value="document" />
            <el-option label="📝 笔记" value="note" />
            <el-option label="📊 数据" value="data" />
            <el-option label="🎯 目标" value="target" />
            <el-option label="💡 想法" value="idea" />
          </el-select>
        </el-form-item>
        <el-form-item label="父页面">
          <el-tree-select v-model="newPage.parentId" :data="pageTreeOptions" :props="{ label: 'name', value: 'id' }"
            placeholder="选择父页面（可选）" clearable check-strictly style="width: 100%" />
        </el-form-item>
        <el-form-item label="页面描述">
          <el-input v-model="newPage.description" type="textarea" placeholder="请输入页面描述（可选）" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreatePageDialog = false">取消</el-button>
        <el-button type="primary" @click="createPage" :loading="creatingPage">创建</el-button>
      </template>
    </el-dialog>

    <!-- 编辑页面对话框 -->
    <el-dialog v-model="showEditPageDialog" title="编辑页面" width="500px">
      <el-form :model="editingPage" :rules="pageRules" ref="editPageFormRef" label-width="80px">
        <el-form-item label="页面名称" prop="name">
          <el-input v-model="editingPage.name" placeholder="请输入页面名称" />
        </el-form-item>
        <el-form-item label="页面图标">
          <el-select v-model="editingPage.icon" placeholder="选择图标" style="width: 100%">
            <el-option label="📄 文档" value="document" />
            <el-option label="📝 笔记" value="note" />
            <el-option label="📊 数据" value="data" />
            <el-option label="🎯 目标" value="target" />
            <el-option label="💡 想法" value="idea" />
          </el-select>
        </el-form-item>
        <el-form-item label="父页面">
          <el-tree-select v-model="editingPage.parentId" :data="pageTreeOptions" :props="{ label: 'name', value: 'id' }"
            placeholder="选择父页面（可选）" clearable check-strictly style="width: 100%" />
        </el-form-item>
        <el-form-item label="页面描述">
          <el-input v-model="editingPage.description" type="textarea" placeholder="请输入页面描述（可选）" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditPageDialog = false">取消</el-button>
        <el-button type="primary" @click="updatePage" :loading="updatingPage">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, ArrowDown, User, Calendar, View, Document, Folder,
  MoreFilled, Edit, Share, Search
} from '@element-plus/icons-vue'
import request from '@/utils/request'

const router = useRouter()
const route = useRoute()

// 响应式数据
const space = ref({})
const pages = ref([])
const selectedPage = ref(null)
const collaborators = ref([])
const pageSearchQuery = ref('')
const showCreatePageDialog = ref(false)
const showEditPageDialog = ref(false)
const creatingPage = ref(false)
const updatingPage = ref(false)
const loading = ref(false)

const pageTreeRef = ref()
const pageFormRef = ref()
const editPageFormRef = ref()

const newPage = reactive({
  name: '',
  icon: 'document',
  parentId: null,
  description: ''
})

const editingPage = reactive({
  id: '',
  name: '',
  icon: 'document',
  parentId: null,
  description: ''
})

// 树形组件配置
const treeProps = {
  children: 'children',
  label: 'name'
}

// 表单验证规则
const pageRules = {
  name: [
    { required: true, message: '请输入页面名称', trigger: 'blur' },
    { min: 1, max: 100, message: '页面名称长度在 1 到 100 个字符', trigger: 'blur' }
  ]
}

// 计算属性
const spaceId = computed(() => route.params.id)

const totalPages = computed(() => {
  const countPages = (pageList) => {
    let count = 0
    pageList.forEach(page => {
      count++
      if (page.children && page.children.length > 0) {
        count += countPages(page.children)
      }
    })
    return count
  }
  return countPages(pages.value)
})

const totalViews = computed(() => {
  const countViews = (pageList) => {
    let count = 0
    pageList.forEach(page => {
      count += page.viewCount || 0
      if (page.children && page.children.length > 0) {
        count += countViews(page.children)
      }
    })
    return count
  }
  return countViews(pages.value)
})

const pageTree = computed(() => {
  return buildTree(pages.value)
})

const filteredPageTree = computed(() => {
  if (!pageSearchQuery.value) {
    return pageTree.value
  }
  return filterTree(pageTree.value, pageSearchQuery.value)
})

const pageTreeOptions = computed(() => {
  const flattenTree = (tree, level = 0) => {
    const result = []
    tree.forEach(node => {
      result.push({
        id: node.id,
        name: '  '.repeat(level) + node.name,
        disabled: editingPage.id === node.id // 不能选择自己作为父页面
      })
      if (node.children && node.children.length > 0) {
        result.push(...flattenTree(node.children, level + 1))
      }
    })
    return result
  }
  return flattenTree(pageTree.value)
})

// 方法
const buildTree = (flatList) => {
  const map = {}
  const roots = []

  // 创建映射
  flatList.forEach(item => {
    map[item.id] = { ...item, children: [] }
  })

  // 构建树形结构
  flatList.forEach(item => {
    if (item.parentId && map[item.parentId]) {
      map[item.parentId].children.push(map[item.id])
    } else {
      roots.push(map[item.id])
    }
  })

  return roots
}

const filterTree = (tree, query) => {
  const filtered = []
  tree.forEach(node => {
    if (node.name.toLowerCase().includes(query.toLowerCase())) {
      filtered.push(node)
    } else if (node.children && node.children.length > 0) {
      const filteredChildren = filterTree(node.children, query)
      if (filteredChildren.length > 0) {
        filtered.push({
          ...node,
          children: filteredChildren
        })
      }
    }
  })
  return filtered
}

const filterNode = (value, data) => {
  if (!value) return true
  return data.name.toLowerCase().includes(value.toLowerCase())
}

const formatDate = (timestamp) => {
  if (!timestamp) return '未知'
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN')
}

const getVisibilityText = (visibility) => {
  const map = {
    'private': '私有',
    'public': '公开'
  }
  return map[visibility] || '未知'
}

const loadSpace = async () => {
  try {
    const response = await request.get(`/api/spaces/${spaceId.value}`)
    if (response.data.code === '200') {
      space.value = response.data.data || {}
    } else {
      ElMessage.error(response.data.msg || '加载空间信息失败')
    }
  } catch (error) {
    console.error('加载空间信息失败:', error)
    ElMessage.error('加载空间信息失败')
  }
}

const loadPages = async () => {
  loading.value = true
  try {
    const response = await request.get(`/api/spaces/${spaceId.value}/pages`)
    if (response.data.code === '200') {
      pages.value = response.data.data || []
    } else {
      ElMessage.error(response.data.msg || '加载页面失败')
    }
  } catch (error) {
    console.error('加载页面失败:', error)
    ElMessage.error('加载页面失败')
  } finally {
    loading.value = false
  }
}

const selectPage = (page) => {
  selectedPage.value = page
}

const createPage = async () => {
  if (!pageFormRef.value) return

  try {
    const valid = await pageFormRef.value.validate()
    if (!valid) return
  } catch {
    return
  }

  creatingPage.value = true
  try {
    // 获取当前用户信息
    const currentUser = localStorage.getItem('currentUser')
    let currentUserInfo = { id: '1', username: currentUser }

    try {
      const userResponse = await request.get(`/api/users/${currentUser}`)
      if (userResponse.data.code === '200' && userResponse.data.data) {
        currentUserInfo = {
          id: userResponse.data.data.id || '1',
          username: userResponse.data.data.username || currentUser
        }
      }
    } catch (error) {
      console.warn('获取用户信息失败，使用默认信息:', error)
    }

    const pageData = {
      ...newPage,
      spaceId: spaceId.value,
      createdBy: currentUserInfo,
      updatedBy: currentUserInfo
    }

    const response = await request.post(`/api/spaces/${spaceId.value}/pages`, pageData, {
      headers: {
        'Content-Type': 'application/json'
      }
    })

    if (response.data.code === '200') {
      ElMessage.success('创建成功')
      showCreatePageDialog.value = false
      resetNewPage()
      loadPages()
    } else {
      ElMessage.error(response.data.msg || '创建失败')
    }
  } catch (error) {
    console.error('创建页面失败:', error)
    ElMessage.error('创建页面失败')
  } finally {
    creatingPage.value = false
  }
}

const resetNewPage = () => {
  Object.assign(newPage, {
    name: '',
    icon: 'document',
    parentId: null,
    description: ''
  })
  if (pageFormRef.value) {
    pageFormRef.value.resetFields()
  }
}

const addChildPage = (parentPage) => {
  newPage.parentId = parentPage.id
  showCreatePageDialog.value = true
}

const editPage = (page) => {
  Object.assign(editingPage, {
    id: page.id,
    name: page.name,
    icon: page.icon || 'document',
    parentId: page.parentId || null,
    description: page.description || ''
  })
  showEditPageDialog.value = true
}

const updatePage = async () => {
  if (!editPageFormRef.value) return

  try {
    const valid = await editPageFormRef.value.validate()
    if (!valid) return
  } catch {
    return
  }

  updatingPage.value = true
  try {
    // 获取当前用户信息
    const currentUser = localStorage.getItem('currentUser')
    let currentUserInfo = { id: '1', username: currentUser }

    try {
      const userResponse = await request.get(`/api/users/${currentUser}`)
      if (userResponse.data.code === '200' && userResponse.data.data) {
        currentUserInfo = {
          id: userResponse.data.data.id || '1',
          username: userResponse.data.data.username || currentUser
        }
      }
    } catch (error) {
      console.warn('获取用户信息失败，使用默认信息:', error)
    }

    const pageData = {
      ...editingPage,
      updatedBy: currentUserInfo
    }

    const response = await request.put(`/api/spaces/${spaceId.value}/pages/${editingPage.id}`, pageData, {
      headers: {
        'Content-Type': 'application/json'
      }
    })

    if (response.data.code === '200') {
      ElMessage.success('更新成功')
      showEditPageDialog.value = false
      loadPages()
      // 如果当前选中的是被编辑的页面，更新选中页面信息
      if (selectedPage.value && selectedPage.value.id === editingPage.id) {
        selectedPage.value = { ...selectedPage.value, ...pageData }
      }
    } else {
      ElMessage.error(response.data.msg || '更新失败')
    }
  } catch (error) {
    console.error('更新页面失败:', error)
    ElMessage.error('更新页面失败')
  } finally {
    updatingPage.value = false
  }
}

const duplicatePage = async (page) => {
  try {
    const response = await request.post(`/api/spaces/${spaceId.value}/pages/${page.id}/duplicate`)
    if (response.data.code === '200') {
      ElMessage.success('复制成功')
      loadPages()
    } else {
      ElMessage.error(response.data.msg || '复制失败')
    }
  } catch (error) {
    console.error('复制页面失败:', error)
    ElMessage.error('复制页面失败')
  }
}

const deletePage = async (page) => {
  try {
    await ElMessageBox.confirm('确定要删除这个页面吗？删除后无法恢复。', '确认删除', {
      type: 'warning',
      confirmButtonText: '确定删除',
      cancelButtonText: '取消'
    })

    const response = await request.delete(`/api/spaces/${spaceId.value}/pages/${page.id}`)
    if (response.data.code === '200') {
      ElMessage.success('删除成功')
      if (selectedPage.value && selectedPage.value.id === page.id) {
        selectedPage.value = null
      }
      loadPages()
    } else {
      ElMessage.error(response.data.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除页面失败:', error)
      ElMessage.error('删除页面失败')
    }
  }
}

const editSpace = () => {
  router.push(`/knowledge/spaces/${spaceId.value}/edit`)
}

const exportSpace = () => {
  ElMessage.info('导出功能开发中')
}

const deleteSpace = async () => {
  try {
    await ElMessageBox.confirm('确定要删除这个空间吗？删除后无法恢复。', '确认删除', {
      type: 'warning',
      confirmButtonText: '确定删除',
      cancelButtonText: '取消'
    })

    const response = await request.delete(`/api/spaces/${spaceId.value}`)
    if (response.data.code === '200') {
      ElMessage.success('删除成功')
      router.push('/knowledge/spaces')
    } else {
      ElMessage.error(response.data.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除空间失败:', error)
      ElMessage.error('删除空间失败')
    }
  }
}

const sharePage = (page) => {
  ElMessage.info('分享功能开发中')
}

// 监听搜索查询
watch(pageSearchQuery, (val) => {
  if (pageTreeRef.value) {
    pageTreeRef.value.filter(val)
  }
})

// 生命周期
onMounted(() => {
  loadSpace()
  loadPages()
})
</script>

<style scoped>
.space-detail-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #e8e8e8;
}

.left-section {
  display: flex;
  align-items: center;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.space-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  background: white;
  border-bottom: 1px solid #e8e8e8;
}

.space-info {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.space-avatar {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  flex-shrink: 0;
}

.space-details {
  flex: 1;
}

.space-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.space-description {
  margin: 0 0 16px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.space-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 13px;
}

.space-stats {
  display: flex;
  gap: 32px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 300px;
  background: white;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.sidebar-header h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.sidebar-actions {
  margin-bottom: 8px;
}

.page-tree {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
}

.tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 0;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.node-icon {
  color: #666;
  font-size: 14px;
}

.node-label {
  font-size: 14px;
  color: #333;
}

.node-actions {
  opacity: 0;
  transition: opacity 0.2s;
}

.tree-node:hover .node-actions {
  opacity: 1;
}

.action-icon {
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.action-icon:hover {
  background-color: #f5f5f5;
}

.empty-pages {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.empty-illustration {
  margin-bottom: 16px;
  color: #ccc;
}

.empty-pages h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
}

.empty-pages p {
  margin: 0 0 16px 0;
  font-size: 14px;
}

.content-area {
  flex: 1;
  background: white;
  overflow-y: auto;
}

.page-detail {
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.page-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-icon {
  color: #666;
  font-size: 20px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.page-actions {
  display: flex;
  gap: 8px;
}

.page-meta {
  margin-bottom: 24px;
}

.meta-row {
  display: flex;
  margin-bottom: 8px;
}

.meta-label {
  width: 80px;
  color: #666;
  font-size: 14px;
}

.meta-value {
  color: #333;
  font-size: 14px;
}

.page-content {
  margin-top: 24px;
}

.content-preview h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.preview-text {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100px;
}

.no-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #666;
}

.no-selection-illustration {
  margin-bottom: 24px;
  color: #ccc;
}

.no-selection h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #333;
}

.no-selection p {
  margin: 0;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: 300px;
  }

  .space-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .space-stats {
    align-self: stretch;
    justify-content: space-around;
  }
}

@media (max-width: 480px) {
  .header-toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .space-meta {
    flex-direction: column;
    gap: 8px;
  }
}
</style>